<template>
<!-- 添加楼宇 -->
    <div class="BatchAdd">
        <div class="BatchAddtitle">
            <p @click="back">
                <i class="el-icon-arrow-left"></i>
                <span>楼宇添加</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 添加楼宇输入框内容板块 -->
        <div class="BatchAddcontent">
            <div class="infomationleft">
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 所属社区：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 楼宇编号：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="Buildingnumber"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 单元数：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="Numberofunits"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">楼宇类型：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="Buildingtype"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">总房屋数量：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="Totalnumberofhouses"
                    clearable class="countent">
                    </el-input>
                </div>
                <!-- 日期 -->
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">建成日期：</span>
                    </p>
                    <el-date-picker
                    v-model="Constructiondate"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期" class="datapicker">
                    </el-date-picker>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">建筑面积：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="buildingarea"
                    clearable class="countent">
                    </el-input>
                </div>
                <!-- 单选 -->
                <div class="payloader">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">房屋编号规则：</span>
                    </p>
                    <div class="choice">
                        <el-radio v-model="radio1" label="1">单元从1开始</el-radio>
                        <el-radio v-model="radio1" label="2">自定义</el-radio>
                    </div>
                </div>
                
            </div>
             <div class="infomationleft">
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 楼宇名称：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="Belongingcommunity"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text"> 总层数：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="Numberoflayers"
                    clearable class="countent">
                    </el-input>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">建筑结构：</span>
                    </p>
                   <el-select v-model="buildingstructure" placeholder="混凝土结构" class="building">
                        <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label" >
                        </el-option>
                    </el-select>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">楼宇用途：</span>
                    </p>
                    <el-select v-model="BuildingUsage" placeholder="住宅楼" class="storeid">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label" >
                        </el-option>
                    </el-select>
                </div>
                <!-- 日期 -->
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">验收日期：</span>
                    </p>
                    <el-date-picker
                    v-model="acceptancedate"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期" class="datapicker">
                    </el-date-picker>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">使用面积：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="usablearea"
                    clearable class="countent">
                    </el-input>
                </div>
                <!-- 单选 -->
                <div class="payloader">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text">是否有储物间：</span>
                    </p>
                    <div class="choice">
                        <el-radio v-model="radio" label="1">有</el-radio>
                        <el-radio v-model="radio" label="2">无</el-radio>
                    </div>
                </div>
            </div>
        </div>
        <!-- 备注信息 -->
        <div class="notesinformation">
            <p class="title">
                <span class="starred"></span>
                <span class="text">备注信息：</span>
            </p>
            <el-input
                type="textarea"
                placeholder="请输入备注信息"
                v-model="note"
                maxlength="300"
                show-word-limit
                class="textarea">
            </el-input>
        </div>
        <!-- 添加楼宇保存按钮 -->
        <div class="contentfooter">
            <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
            <el-button type="primary" class="createbutton" @click="ceate"><i class="el-icon-folder-add"></i>保存后继续创建</el-button>
            <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
    </div>
</template>

<script>
export default {
     data() {
      return {
        radio:'1',
        radio1:'1',
        input: '',  //输入框
        Belongingcommunity:'',  //楼宇名称
        Buildingnumber:'',  //楼宇编号
        Numberofunits:'',   //单元数
        Buildingtype:'',    //楼宇类型
        buildingstructure:'',   //建筑结构
        Numberoflayers:'',      //层数
        BuildingUsage:'' ,       //楼宇用途
        Constructiondate:'',       //建成时间
        acceptancedate:'',          //验收时间
        buildingarea:'',        //建筑面积
        usablearea:'',          //使用面积  
        Totalnumberofhouses:'', //总房屋数量
        Housenumberingrules:'1', //房屋编号规则
        isstorageroom:'1',       //是否有储物间
        note:'',                //备注
        options1: [{
          value: '选项1',
          label: '混凝土结构'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }], //下拉选项
        options2: [{
          value: '选项1',
          label: '住宅楼'
        }, {
          value: '选项2',
          label: '商铺'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }], //下拉选项
      }
    },
    mounted(){
        if(this.$route.query.data){
            console.log(this.$route.query.data,2222222222)
            this.Buildingtype=this.$route.query.data.Buildingtype
            this.input=this.$route.query.data.Belongingcommunity
            this.Belongingcommunity=this.$route.query.data.Buildingname
            this.Buildingnumber=this.$route.query.data.Buildingnumber
            this.Numberofunits=this.$route.query.data.Numberofunits
            this.BuildingUsage=this.$route.query.data.BuildingUsage
            this.Constructiondate=this.$route.query.data.Constructiondate
            this.acceptancedate=this.$route.query.data.acceptancedate
            this.usablearea=this.$route.query.data.usablearea
            this.Totalnumberofhouses=this.$route.query.data.Totalnumberofhouses
            // this.radio=this.$route.query.data.isstorageroom
            this.Housenumberingrules=this.$route.query.data.Housenumberingrules
            this.note=this.$route.query.data.note
            this.Numberoflayers=this.$route.query.data.Numberoflayers
            this.buildingstructure=this.$route.query.data.buildingstructure
            this.buildingarea=this.$route.query.data.buildingarea
            console.log(this.radio,333333333)
        }
    },
    methods:{
        // 清空
        clear(){
            this.input=''
            this.Belongingcommunity=''
            this.Buildingnumber=''
            this.Numberofunits=''
            this.Buildingtype=''
            this.buildingstructure=''
            this.Numberoflayers=''
            this.BuildingUsage=''
            this.Constructiondate=''
            this.buildingarea=''
            this.usablearea=''
            this.Totalnumberofhouses=''
            this.note=''
            this.acceptancedate=''
            this.radio=null
            this.radio1=null
        },
        // 添加社区底部保存 保存重建 重置按钮
        save(){
            console.log("保存")
            if(this.input=='' || this.Belongingcommunity=='' || this.Buildingnumber=='' || this.Numberofunits=='' || this.Buildingtype=='' || this.Constructiondate=='' || this.buildingarea=='' || this.Numberoflayers=='' || this.buildingstructure=='' || this.BuildingUsage=='' || this.acceptancedate=='' || this.usablearea==''){
                this.$alert('*为必填项，输入内容不能为空', '', {
                    confirmButtonText: '确定',
                });
            }else{
                if(this.$route.query.data){
                    console.log(111)
                    fetch(`http://127.0.0.1/buildingmanagementchange?Belongingcommunity=${this.input}&Buildingname=${this.Belongingcommunity}&Numberofunits=${this.Numberofunits}&Buildingtype=${this.Buildingtype}&buildingstructure=${this.buildingstructure}&Numberoflayers=${this.Numberoflayers}&BuildingUsage=${this.BuildingUsage}&Constructiondate=${this.Constructiondate}&acceptancedate=${this.acceptancedate}&buildingarea=${this.buildingarea}&usablearea=${this.usablearea}&Buildingnumber=${this.Buildingnumber}&Totalnumberofhouses=${this.Totalnumberofhouses}&Housenumberingrules=${this.Housenumberingrules}&isstorageroom=${this.isstorageroom}&note=${this.note}&date=${this.$route.query.data.date}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$router.go(-1)
                        this.$message({
                            message: '数据修改成功',
                            type: 'success'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    fetch(`http://127.0.0.1/buildingmanagementadd?Belongingcommunity=${this.input}&Buildingname=${this.Belongingcommunity}&Numberofunits=${this.Numberofunits}&Buildingtype=${this.Buildingtype}&buildingstructure=${this.buildingstructure}&Numberoflayers=${this.Numberoflayers}&BuildingUsage=${this.BuildingUsage}&Constructiondate=${this.Constructiondate}&acceptancedate=${this.acceptancedate}&buildingarea=${this.buildingarea}&usablearea=${this.usablearea}&Buildingnumber=${this.Buildingnumber}&Totalnumberofhouses=${this.Totalnumberofhouses}&Housenumberingrules=${this.Housenumberingrules}&isstorageroom=${this.isstorageroom}&note=${this.note}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据添加成功',
                            type: 'success'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }
        },
        ceate(){
            console.log("保存后继续创建")
             if(this.input=='' || this.Belongingcommunity=='' || this.Buildingnumber=='' || this.Numberofunits=='' || this.Buildingtype=='' || this.Constructiondate=='' || this.buildingarea=='' || this.Numberoflayers=='' || this.buildingstructure=='' || this.BuildingUsage=='' || this.acceptancedate=='' || this.usablearea==''){
                this.$alert('*为必填项，输入内容不能为空', '', {
                    confirmButtonText: '确定',
                });
            }else{
                if(this.$route.query.data){
                    console.log(111)
                    fetch(`http://127.0.0.1/buildingmanagementchange?Belongingcommunity=${this.input}&Buildingname=${this.Belongingcommunity}&Numberofunits=${this.Numberofunits}&Buildingtype=${this.Buildingtype}&buildingstructure=${this.buildingstructure}&Numberoflayers=${this.Numberoflayers}&BuildingUsage=${this.BuildingUsage}&Constructiondate=${this.Constructiondate}&acceptancedate=${this.acceptancedate}&buildingarea=${this.buildingarea}&usablearea=${this.usablearea}&Buildingnumber=${this.Buildingnumber}&Totalnumberofhouses=${this.Totalnumberofhouses}&Housenumberingrules=${this.Housenumberingrules}&isstorageroom=${this.isstorageroom}&note=${this.note}&date=${this.$route.query.data.date}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据修改成功',
                            type: 'success'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                }else{
                    fetch(`http://127.0.0.1/buildingmanagementadd?Belongingcommunity=${this.input}&Buildingname=${this.Belongingcommunity}&Numberofunits=${this.Numberofunits}&Buildingtype=${this.Buildingtype}&buildingstructure=${this.buildingstructure}&Numberoflayers=${this.Numberoflayers}&BuildingUsage=${this.BuildingUsage}&Constructiondate=${this.Constructiondate}&acceptancedate=${this.acceptancedate}&buildingarea=${this.buildingarea}&usablearea=${this.usablearea}&Buildingnumber=${this.Buildingnumber}&Totalnumberofhouses=${this.Totalnumberofhouses}&Housenumberingrules=${this.Housenumberingrules}&isstorageroom=${this.isstorageroom}&note=${this.note}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(res1)
                        this.$message({
                            message: '数据添加成功',
                            type: 'success'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }
        },
        reseate(){
            console.log("重置")
            this.clear()
            // console.log(this.isstorageroom)
            // Number(this.radio)+1
            // console.log(this.radio)
        },
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
    .BatchAdd{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加楼宇标题
        .BatchAddtitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加楼宇输入框内容模块
        .BatchAddcontent{
            width: 100%;
            padding: 0 40px;
            padding-right: 60px;
            box-sizing: border-box;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            .infomationleft{
                width: 520px;
                margin-top: 30px;
                .payloader{
                    width: 100%;
                    height: 40px;
                    margin-bottom: 25px;
                    display: flex;
                    align-items: center;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .countent{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .datapicker{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .storeid,.building{
                        width: 400px;
                            ::v-deep .el-input__inner {
                                border-color: #C0C4CC !important;
                            }
                    }
                    
                }
            }
        }
        // 备注信息
        .notesinformation{
            width: 100%;
            padding-left: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgb(242, 242, 242);
            box-sizing: border-box;
            display: flex;
            .title{
                width: 120px;
                padding-right: 20px;
                font-size: 14px;
                color: #666666;
                box-sizing: border-box;
                text-align: right;
                white-space: nowrap;
                .starred{
                    color: #FF3B30;
                }
            }
            .textarea{
                width: 1080px;
                height: 118px;
                ::v-deep .el-textarea__inner{
                    width: 1080px;
                    height: 118px;
                }
                ::v-deep .el-textarea__inner {
                    border-color: #C0C4CC !important;
                    resize: none;
                }
            }
        }
         .contentfooter{
                width: 100%;
                box-sizing: border-box;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                .savebutton,.reseatebutton{
                    width: 140px;
                    height: 40px;
                    i{
                        margin-right: 5px;
                    }
                }
                .createbutton{
                    width: 160px;
                    height: 40px;
                    i{
                        margin-right: 5px;
                    }
                }
                .el-button--primary{
                    background-color: rgba(0, 121, 254, 1);
                }
                .el-button--primary:hover {
                    background: #3394fe !important;
                    border-color: #3394fe !important;
                    color: #FFF !important;
                }
                .el-button.is-plain{
                    border-color: rgba(0, 121, 254, 1);
                    color: rgba(0, 121, 254, 1);
                }
                .el-button.is-plain:hover {
                    background: #FFF !important;
                    border-color: #409EFF;
                    color: #409EFF !important;
                }
            }
    }
</style>